<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home"> 
        <br>
 
        <!-- <i style="font-size:40px;" class="el-icon-menu"></i> -->
 
        <!-- <el-rate v-model="value1"></el-rate> -->
        <el-select v-model="outUrl"  
        multiple
        filterable
        allow-create
        default-first-option  
        placeholder="请选择">
        <el-option
        v-for="item in cities"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
        </el-option>
        </el-select>
 
        <iframe :src="outUrl" style="width: 100%;height: 700px;" frameborder="0"></iframe>
 
    </div>
</template>



<script type="text/javascript">
export default {
    name: 'Weditor',
    data(){
        return {
            url:"",
            html: '',
            loading: false,
            cities: [{
                    value: 'http://hwdev.xiezixiansheng.com:8888/tree',
                    label: 'jupyter'
                }, {
                    value: 'http://hwdev.xiezixiansheng.com/document/handwrite/doc.html',
                    label: '手迹造字-接口文档'
                }, {
                    value: 'http://test.resource.myfont.me/',
                    label: '数据中心-测试'
                },{
                    value:"http://xztest.xiezixiansheng.com/mrwrite_aliyun/document/mrwrite2_4/doc.html",
                    label:"写字先生接口文档"
                },{
                    value:"http://192.168.248.252/",
                    label:"共享"
                }
            ],
            outUrl:"http://hwdev.xiezixiansheng.com:9191"
        }
    },
    mounted () {
        this.url = 'http://hwdev.xiezixiansheng.com:9191';
        this.load(this.url)
    },
    methods: {
        load (url) {
            if (url && url.length > 0) {
             // 加载中
                this.loading = true
                let param = {
                accept: 'text/html, text/plain'
                }
                axios.get(url, param).then((response) => {
                this.loading = false
                // 处理HTML显示
                this.html = response.data
                }).catch(() => {
                this.loading = false
                this.html = '加载失败'
                })
            }
       }
    }
}
</script>